#框架
React = require('react')
Dimensions = require('Dimensions')
{ width, height } = Dimensions.get('window')
#组件
{View,Image,Text,ScrollView,TouchableHighlight,StyleSheet,Navigator,ListView,TouchableOpacity,ActivityIndicator} = require('react-native')
RefreshControl = require('antd-mobile/lib/refresh-control')
TopNotice = require('antd-mobile/lib/notice-bar')
#第三方库
{connect} = require('react-redux')
moment = require('moment')
#项目引用
{fetchGetList,fetchRefreshList} = require('../actions/page_hdss.js')

backImg = require('../img/back.png')
searchIcon = require('../img/search_white.png')
basePage = require('../mixins/basePageNew.js')
renderAfterTransfer = require('../highOrderComponent/renderAfterTransfer.js')
lazyLoadData = require('../highOrderComponent/lazyLoadData.js')
  # mixins:[basePage]

# Page_Hdss = React.createClass
class Page_Hdss extends React.Component
  constructor:(props)->
    super
    @ds = new ListView.DataSource rowHasChanged:(r1,r2)->r1 isnt r2
  renderHeader:->
      <View style={{flexDirection:'row',flex:0,height:60,alignItems:'center', justifyContent:'center',backgroundColor:'#0066FF'}}>
        <View style={{flex:1,padding:10}}>
          <TouchableOpacity onPress={=>@props.navigator.pop()}>
            <Image source={backImg}  style={{height:30,width:30,resizeMode:'contain'}}/>
          </TouchableOpacity>
        </View>
        <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
          <Text style={{fontSize:20,color:'#ffffff'}}>航道水深</Text>
        </View>

        <View style={{flex:1,alignItems:'flex-end',padding:10}}>
          <TouchableOpacity onPress={@_showActionSheet}>
          </TouchableOpacity>
        </View>
      </View>
  renderListColumns:->
    <View style={{flexDirection:'row',backgroundColor:'#f9f9f9',padding:10,justifyContent:'center',alignItems:'center'}}>
      <View style={{flex:3}}>
        <Text style={{fontWeight:"bold"}}>航道名称</Text>
      </View>
      <View style={{flex:1,flexDirection:'column',}}>
        <Text style={{fontWeight:"bold"}}>进出</Text>
        <Text style={{fontWeight:"bold"}}>标志</Text>
      </View>
      <View style={{flex:1,flexDirection:'column'}}>
        <Text style={{fontWeight:"bold"}}>航道</Text>
        <Text style={{fontWeight:"bold"}}>水深</Text>
      </View>
      <View style={{flex:2}}>
        <Text style={{fontWeight:"bold"}}>更新时间</Text>
      </View>
    </View>
  renderRow:(rowData,sectionID,rowID,highlightRow)->
    bColor = if rowID%2 isnt 0 then "#f9f9f9" else "#ffffff"
    state =
      'I':'进口'
      'O':'出口'
      'F':'全部'
    # <TouchableHighlight onPress={->highlightRow(rowID)} key={rowData.CHROUTCODE}>
    <View style={{flexDirection:'row',padding:10, backgroundColor:bColor,justifyContent:'center',alignItems:'center'}}>
      <View style={{flex:3}}>
        <Text>{rowData.VCROUTNAME}</Text>
      </View>
      <View style={{flex:1}}>
        <Text>{state[rowData.CHINOUTFLAG]}</Text>
      </View>
      <View style={{flex:1}}>
        <Text>{rowData.NMWATERDEPTH}</Text>
      </View>
      <View style={{flex:2}}>
        <Text>{moment(rowData.DTUPDATETIME).format('YYYY-MM-DD')}</Text>
      </View>
    </View>
  refreshList:->
    @props.fetchRefresh()
  _renderListView:->
    <ListView dataSource={@dataSource} style={{flex:1}}
          enableEmptySections={true}
          renderHeader={@_renderListHeader}
          renderRow={@renderRow}
          renderSeparator={this._renderListSeparator}
          renderFooter={@_renderListFooter}
          pageSize={1}
          scrollEventThrottle={20}
          onEndReached={@_onEndReached}
          onEndReachedThreshold={20}
          refreshControl={
            <RefreshControl refreshing={@props.refreshing} onRefresh={@refreshList.bind(@)}
                distanceToRefresh={60}
                resistance={2.5}
                hammerOptions={{
                  touchAction:'auto'
                  recognizers:
                    pan:
                      threshold:10
                  }}/>
          }>
    </ListView>
  render:->
    @dataSource = @ds.cloneWithRows(@props.list)
    <View style={width:width,height:height,flexDirection:'column',backgroundColor:'#ffffff',paddingBottom:10}>
      {@renderHeader()}
      {
        if @props.connected is false
          if @props.list.length>0
            <TopNotice mode="closable" style={{margin:10}}>
              无网络连接，您现在看到的是离线缓存数据
            </TopNotice>
          else
            <TopNotice mode="closable" style={{margin:10}}>
              当前无网络连接，请稍后重试
            </TopNotice>
      }
      {@renderListColumns?()}
      <View  style={{height:1,width:width,backgroundColor:'#CCCCCC'}}/>
      {@_renderListView()}
    </View>


styles = StyleSheet.create
  row:
    flexDirection:'column'
    justifyContent:'center'
    padding:10
    backgroundColor:'#F6F6F6'
  text:
    flex:1

mapStateToProps = (state)->
  list:state.page_hdss.list
  isLoading:state.page_hdss.isLoading
  pageIndex:state.page_hdss.pageIndex
  completed:state.page_hdss.completed
  refreshing:state.page_hdss.refreshing
  lastFetchTime:state.page_hdss.lastFetchTime
  connected:state.appState.connected
mapDispatchToProps = (dispatch,wonProps)->
  fetchGet:(pageNum)->
    dispatch fetchGetList(pageNum)
  fetchRefresh:->
    dispatch fetchRefreshList()
Page_Hdss = renderAfterTransfer(Page_Hdss)
Page_Hdss = lazyLoadData(moment.duration(2, 'days'))(Page_Hdss)
module.exports = connect(mapStateToProps,mapDispatchToProps)(Page_Hdss)
